<template>
  <div class="sidebar">
    <div class="logo-details">
      <el-icon><Van /></el-icon>
      <span class="logo_name">大件运输系统</span>
    </div>


    <ul class="nav-links">
      <li>
        <b @click="addTab('个人资料')">
          <!--          <i class='bx bx-pie-chart-alt-2' ></i>-->
          <el-icon><UserFilled /></el-icon>
          <span class="link_name">个人资料</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('个人资料')">个人资料</b></li>
        </ul>
      </li>
      <li>
        <b @click="addTab('车辆管理')">
          <!--          <i class='bx bx-pie-chart-alt-2' ></i>-->
          <el-icon><Management /></el-icon>
          <span class="link_name">车辆管理</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('车辆管理')">车辆管理</b></li>
        </ul>
      </li>
      <li>
        <b @click="addTab('运输路线申报')">
          <!--          <i class='bx bx-pie-chart-alt-2' ></i>-->
          <el-icon><Platform /></el-icon>
          <span class="link_name">运输路线申报</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('运输路线申报')">运输路线申报</b></li>
        </ul>
      </li>

      <li id="sbjl">
        <div class="iocn-link">
          <b class="arrow">
            <el-icon><List /></el-icon>
            <!--                  <i class='bx bx-plug' ></i>-->
            <span class="link_name">申报记录</span>
          </b>
          <el-icon class="arrow"><ArrowDown /></el-icon>
        </div>
        <ul class="sub-menu">
          <li><b class="link_name" >申报记录</b></li>
          <li><b @click="addTab('历史申报记录')">历史申报记录</b></li>
          <li><b @click="addTab('审核中的申报')">审核中的申报</b></li>

        </ul>
      </li>
      <li>
        <b @click="addTab('系统通知')">
          <el-icon><Promotion /></el-icon>

          <span class="link_name">系统通知</span>
        </b>
        <ul class="sub-menu blank">
          <li><b class="link_name" @click="addTab('系统通知')">系统通知</b></li>
        </ul>
      </li>



      <li>
        <div class="profile-details">
          <div class="profile-content">
            <!--          头像  <img src="image/profile.jpg" alt="profile">-->
            <el-avatar class="nav-avatar"   :src="pathUrl+'/getImage?path='+imageUrl"/>
            <div class="profile_name">{{ realName }}</div>
          </div>



        </div>
      </li>

    </ul>
  </div>
  <section class="home-section">
    <el-container>
      <el-header class="home-header">
        <div class="home-head">
          <el-icon class="bx-menu"><Fold /></el-icon>
          司机首页
        </div>
        <div class="home-tabs">

          <el-tag
              v-for="item in tagData"
              :key="item.label"
              :type="item.type"
              class="mx-1"
              :effect="item.effect"
              closable
              @click="choose(item)"
              aria-checked="true"
              @close="remove(item)"
          >
            {{item.label}}
          </el-tag>


          <div class="xxk">
            <el-button link type="primary" @click="backToLogin">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-button>
          </div>
          <div class="xxk">
            <el-button link type="primary" @click="closeAll">
              <el-icon><Remove /></el-icon>
              关闭全部
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main class="home-main">
        <div class="component-main">
          <component v-bind:is="tagData[currentTagIndex].component" v-if="tagsNum>0"/>
        </div>

      </el-main>
    </el-container>
  </section>

</template>
<script>
import routeDeclare from "@/router/driver/routeDeclare"
import vehicleManage from "@/router/driver/vehicleManage"
import driverInform from "@/router/driver/driverInform"
import historyReview from "@/router/driver/historyReview"
import underReview from "@/router/driver/underReview"
import driverPersonal from "@/router/driver/personal/driverPersonal"
import driverPassword from "@/router/driver/personal/driverPassword"
import pathUrl from "@/main";

import router from "@/router";
export default {
  name:"driverView",
  components:{
    driverInform,
    vehicleManage,
    driverPersonal,
    driverPassword,
    historyReview,
    underReview,
    routeDeclare
  },
  mounted() {
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)
    this.realName=user.realName
    this.imageUrl=user.image

    //新加的
    let arrow = document.querySelectorAll(".arrow");
    for (var i = 0; i < arrow.length; i++) {

      arrow[i].addEventListener("click", (e)=>{

        let arrowParent = document.getElementById('sbjl');
        arrowParent.classList.toggle("showMenu");
      });
    }

    let sidebar = document.querySelector(".sidebar");
    let sidebarBtn = document.querySelector(".bx-menu");
    console.log(sidebarBtn);
    sidebarBtn.addEventListener("click", ()=>{
      sidebar.classList.toggle("close");
      sidebarBtn.classList.toggle("close");
    });
  },
  computed:{

  },
  data(){
    return{
      menuIndex:'',
      pathUrl,
      imageUrl:'',
      realName:"",
      tagsNum : 1,
      tagData :[
        {
          index:0,
          label:'个人资料',
          type:'primary',
          component: driverPersonal,
          effect:'light'
        },
      ],
      currentTagIndex:0,
    }
  },
  methods:{
    closeAll(){
      this.tagData.length=0
      this.currentTagIndex=0
      this.tagsNum=0
    },
    remove(a){
      if(a.index<=this.currentTagIndex){
        this.tagsNum-=1;
        this.tagData.splice(a.index,1);
        for(let i=0;i<this.tagsNum;i++){
          this.tagData[i].index=i;
        }
        if(this.currentTagIndex===0){
          this.choose(this.tagData[this.currentTagIndex])
        }else{
          this.choose(this.tagData[this.currentTagIndex-1])
        }
      }else if(this.tagsNum===1){
        this.closeAll()
      }else{
        this.tagsNum-=1;
        this.tagData.splice(a.index,1);
        for(let i=0;i<this.tagsNum;i++){
          this.tagData[i].index=i;
        }
      }
    },
    choose(a){
      this.currentTagIndex=a.index
      for(let i=0;i<this.tagsNum;i++){
        if(this.tagData[i].index===a.index){
          this.tagData[i].effect='dark'
        }else {
          this.tagData[i].effect='light'
        }
      }
      this.menuIndex=this.tagData[this.currentTagIndex].label
    },
    addTab(a){
      let flag=1;
      for(let i=0;i<this.tagsNum;i++){
        if(this.tagData[i].label===a){
          this.choose(this.tagData[i])
          flag=0;
        }
      }
      if(flag===0){
        return
      }else{
        switch (a){
          case '系统通知':
            this.tagData.push({
              index:this.tagsNum,
              label:'系统通知',
              type:'primary',
              component: driverInform,
              effect:'light'
            })
            break;
          case '个人资料':
            this.tagData.push({
              index:this.tagsNum,
              label:'个人资料',
              type:'primary',
              component: driverPersonal,
              effect:'light'
            })
            break;
          case '密码修改':
            this.tagData.push({
              index:this.tagsNum,
              label:'密码修改',
              type:'primary',
              component: driverPassword,
              effect:'light'
            })
            break;
          case '车辆管理':
            this.tagData.push({
              index:this.tagsNum,
              label:'车辆管理',
              type:'primary',
              component: vehicleManage,
              effect:'light'
            })
            break;
          case '运输路线申报':
            this.tagData.push({
              index:this.tagsNum,
              label:'运输路线申报',
              type:'primary',
              component: routeDeclare,
              effect:'light'
            })
            break;
          case '历史申报记录':
            this.tagData.push({
              index:this.tagsNum,
              label:'历史申报记录',
              type:'primary',
              component: historyReview,
              effect:'light'
            })
            break;
          case '审核中的申报':
            this.tagData.push({
              index:this.tagsNum,
              label:'审核中的申报',
              type:'primary',
              component: underReview,
              effect:'light'
            })
            break;
        }
        this.tagsNum+=1;
      }
      for(let i=0;i<this.tagsNum;i++){
        if(this.tagData[i].label===a){
          this.choose(this.tagData[i])
        }
      }
    },
    backToLogin:function (){
      sessionStorage.clear()
      router.push('/login')
    },
  }
}
</script>
<style scoped>
.xxk{
  float:right;
  width: 80px;
  height:100%;
  background-color: white;
  box-shadow: #999999;
  border-left: #999999 1px solid;
  text-align: center;
}
.mx-1{
  cursor:pointer;
  height: 28px;
  margin-left: 2px;
}
.home-head{
  height: 60px;
  background-color: #2a3648;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  color: white;
}
.home-head .el-icon{
  position: absolute;
  left: 20px;
  top:12px;
}
.home-tabs{
  height: 30px;
  padding: 1px 1px 1px 1px;
  background-color: rgb(238, 239, 241);
  line-height: 30px;
  text-align: left;
}
.home-header{
  margin: 0px;
  padding: 0px;
  height: 90px;
}
.el-container{
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.el-aside{
  margin: 0px;
  padding: 0px;
}
.el-main{
  margin: 0px;
  padding: 0px;
}
.home-main{

  width: 100%;
  height: 100%;
  background-color: rgba(140, 147, 157, 0.38);
}
.home-main .component-main{
  position: relative;
  left: 1%;
  top:2%;
  width: 98%;
  height: 96%;
  background-color: white;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: #11101d;
  z-index: 100;
  transition: all 0.5s ease;
}
.sidebar.close{
  width: 78px;
}
.sidebar .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details .el-icon{
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}
.sidebar .logo-details .logo_name{
  position: fixed;
  left: 70px;
  display: block;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
  display: none;
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links{
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
  display: none;
}
.sidebar .nav-links li{
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
  background: #1d1b31;
}
.sidebar .nav-links li .iocn-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
  display: block
}
.sidebar .nav-links li .el-icon{
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu .el-icon.arrow{
  transform: rotate(-180deg);
}
.sidebar.close .nav-links .el-icon.arrow{
  display: none;
}
.sidebar .nav-links li b{
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.sidebar .nav-links li b .link_name{
  position: fixed;
  left: 70px;
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  transition: all 0.4s ease;
}
.sidebar.close .nav-links li b .link_name{
  display: none;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: #1d1b31;
  display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
  display: block;
}
.sidebar .nav-links li .sub-menu b{
  color: #fff;
  font-size: 15px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
  cursor: pointer;
}
.sidebar .nav-links li .sub-menu b:hover{
  opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
  font-size: 18px;
  opacity: 1;
  display: block;
}
.sidebar .nav-links li .sub-menu.blank{
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .profile-details{
  position: fixed;
  bottom: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1d1b31;
  padding: 6px 0;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details{
  background: none;
}
.sidebar.close .profile-details{
  width: 78px;
}
.sidebar .profile-details .profile-content{
  display: flex;
  align-items: center;
}
.sidebar .profile-details .el-avatar{
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 14px 0 12px;
  background: #b4b2c7;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details .el-avatar{
  padding: 10px;
}
.sidebar .profile-details .profile_name{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;

}
.sidebar.close .profile-details .el-icon,
.sidebar.close .profile-details .profile_name{
  display: none;
}

.home-section{
  position: relative;
  background: #E4E9F7;
  height: 100vh;
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
  left: 78px;
  width: calc(100% - 78px);
}

.home-section .home-header .home-head .bx-menu{
  color: #ffffff;
  font-size: 35px;
}
.home-section .home-header .home-head .bx-menu{
  margin: 0 15px;
  cursor: pointer;
}
.home-section .home-header .home-head .bx-menu.close{
  transform: rotate(-180deg);
}
</style>